<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>myTask1</title>
</head>
<body>
	<!-- 带导航的页头 -->
	<header>
		<h1>网站一级标题</h1>
		<nav>
			<ul>
				<li><a href="#">导航链接一</a></li>
				<li><a href="#">导航链接二</a></li>
				<li><a href="#">导航链接三</a></li>
				<li><a href="#">导航链接四</a></li>
			</ul>
		</nav>
	</header>
	
	<!-- 主页面内容区 -->
	<main>
		
		<!-- 第一篇文章 -->
		<article>
			<h1>第一篇文章一级标题</h1>
			<h2>文章二级标题</h2>
			
			<p><span>文章作者</span>  <span>文章发表时间</span></p>
			
			<p>这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落。</p> 
			<p>这是第二段很长很长的段落，这是第二段很长很长的段落，这里有个<strong>重要的词</strong>，这里有一个<em>强调的词</em>，这是第二段很长很长的段落，这是第二段很长很长的段落。</p>
			<p>这是第三段很长很长的段落，这是第三段很长很长的段落，这里有一个<a href="http://ife.baidu.com">百度前端技术学院</a>的链接，这是第三段很长很长的段落，这是第三段很长很长的段落，这是第三段很长很长的段落。</p>
			<p>这是第四段很长很长的段落，这里有个<b>加粗的词</b>，这是第四段很长很长的段落，这里有个<i>斜体的词</i>，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落。</p>
			
			<div><img width="200px" height="200px" src="images/beatifulGirl.jpg" alt="美女" title="美女" /></div>
			
			<p>这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是一个<b>加粗的词</b>，这是第五段很长很长的段落，这里有一个在新窗口打开的链接<a href="http://ife.baidu.com" target="_blank" >百度前端技术学院</a>，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落。</p> 

		</article>
		
		<!-- 第二篇文章 -->
		<article>
			<h1>第二篇文章一级标题</h1>
			<h2>文章二级标题</h2>
			
			<p><span>文章作者</span>  <span>文章发表时间</span></p>
			<br/>
			
			<p>这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落。</p>
			<p>这是第二段很长很长的段落，这是第二段很长很长的段落，这里有个<strong>重要的词</strong>，这里有一个<em>强调的词</em>，这是第二段很长很长的段落，这是第二段很长很长的段落。</p>
			<p>这是第三段很长很长的段落，这是第三段很长很长的段落，这里有一个<a href="http://ife.baidu.com">百度前端技术学院</a>的链接，这是第三段很长很长的段落，这是第三段很长很长的段落，这是第三段很长很长的段落。</p>
			<p>这是第四段很长很长的段落，这里有个<b>加粗的词</b>，这是第四段很长很长的段落，这里有个<i>斜体的词</i>，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落。</p>
			
			<div><img width="200px" height="200px" src="images/handsomeBoy.jpg" alt="帅哥" title="帅哥" /></div>
			
			<ul>
				<li>列表项目一</li>
				<li>列表项目二</li>
				<li>列表项目三</li>
			</ul>
			
			<h2>图片块</h2>
			<section><p>这是好看的赛车图片</p><img src="images/pic1.jpg"  width="200px" height="200px" alt="pic1"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic2.jpg"  width="200px" height="200px" alt="pic2"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic3.jpg"  width="200px" height="200px" alt="pic3"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic4.jpg"  width="200px" height="200px" alt="pic4"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic5.jpg"  width="200px" height="200px" alt="pic5"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic6.jpg"  width="200px" height="200px" alt="pic6"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic7.jpg"  width="200px" height="200px" alt="pic7"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic8.jpg"  width="200px" height="200px" alt="pic8"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic9.jpg"  width="200px" height="200px" alt="pic9"></section>
			<section><p>这是好看的赛车图片</p><img src="images/pic10.jpg" width="200px" height="200px"  alt="pic10"></section>
		</article>  
		
		<!-- 第三篇文章 -->
		<article>
			<h1>第三篇文章一级标题</h1>
			<h2>文章二级标题</h2>
			<p><span>文章作者</span>  <span>文章发表时间</span></p>
			<br/>
			
			<ol>
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
			</ol>
			
			<p>下面是一个表格，加一个"border"好让你看清楚</p>
			
			<table border="1">
				<caption>表格标题</caption>
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="#">操作</a></td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="2">1000</td>
				</tr>
			</table>
		</article>
	</main>

	<!-- 侧边栏	 -->
	<aside>
		<h1>这是一个侧栏的标题</h1>
		<h2>侧栏窗口标题</h2>

		<form action="">
			<div>
				<label for="mail">请输入邮箱地址：</label>
				<input type="text" id="mail" placeholder="请输入正确邮箱地址" />
				<p>邮箱地址请按要求格式输入</p>
			</div>
			<div>
				<label for="pd">请输入密码：</label>
				<input type="password" id="pd" placeholder="请输入密码" />
				<label for="cpd">请重复输入密码</label>
				<input type="password" id="cpd" placeholder="请确认密码" />
				<p>密码请为6-16位英文数字</p>
			</div>
			<div>
				<label for="sex">性别：</label>
				<input type="radio" name="sex" id="male" />男
				<input type="radio" name="sex" id="female" />女
				
				<label for="city">城市：</label>
				<select name="city" id="city">
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="guangzhou">广州</option>
					<option value="shenzhen">深圳</option>
					<option value="nanjing">南京</option>
					<option value="suzhou">苏州</option>
				</select>	
				
				<label for="hobies">爱好：</label>
				<input type="checkbox" name="sport" value="sport" />运动
				<input type="checkbox" name="art" value="art" />艺术
				<input type="checkbox" name="science" value="science" />科学

				<label for="scrible">个人描述：</label>
				<textarea name="scrible" id="scrible" cols="30" rows="5" placeholder="多行输入文本框" ></textarea>
				<input type="button" value="确认提交" />
			</div>
		</form>
	</aside>

	<footer>
		<p>版权所有&copy;</p>
	</footer>
</body>
</html>